<template>
  <div class="board">
    <navContent></navContent>
    <div class="container">
      <div v-if="commentLists.length === 0">
        <el-card :body-style="{ padding: '10px', background: '#eee' }" v-for="(item,index) in commentLists" :key="index">
          暂无留言，请留下你的脚印😀
        </el-card>
      </div>
      <div v-else>
        <el-card :body-style="{ padding: '10px', background: '#eee' }" v-for="(item,index) in commentLists" :key="index">
          <div class="commentsUserInfo">
            <div class="commentsUser">
              <img :src="item.img" alt="用户头像">
            </div>
            <div>
              <p class="name">{{item.userName}}</p>
              <p class="createTime">{{item.createTime}}</p>
            </div>
          </div>
          <div style="padding: 0 50px;">
            {{item.content}}
          </div>
          <!-- <div style="display:flex;justify-content:flex-end;">
            <el-button type="primary" size="mini">回复</el-button>
          </div> -->
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import navContent from '@/components/navContent'
export default {
  name:'board',
  components: {
    navContent,
  },
  data () {
    return {
      commentLists: [
        {
          img: '',//头像地址
          userName: '会说话的小蚂蚁',//用户名称
          createTime: '2019-10-10 21:49',
          content: '会说话的小蚂蚁你真帅！！！👍',//留言内容
        },
        {
          img: '',//头像地址
          userName: '会说话的小蚂蚁',//用户名称
          createTime: '2019-10-10 21:49',
          content: '这篇文章真心不错！！！👍',//评论内容
        }
      ],// 留言列表
    }
  }
}
</script>

<style lang="less" scoped>
.board {
  .container {
    padding: 20px;
    margin-top: 10px;
  }
  .commentsUserInfo {
    display: flex;
    align-items: center;
    .commentsUser {
      width: 40px;
      height: 40px;
      margin-right: 10px; 
      border: 1px solid #eee;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      color: #333;
      font-size: 14px;
    }
    .createTime {
      margin-top: -8px;
      color: #ccc;
      font-size: 12px;
    }
  }
  /deep/.el-card {
    margin-bottom: 5px;
  }
}
</style>
